<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- ============================CSS link goes here============================ -->
	<!-- <link rel="stylesheet" href="css/globle.css"> -->
	<link rel="stylesheet" href="jquery-ui-1.10.3.flick/css/flick/jquery-ui-1.10.3.custom.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="screen">
	<!-- Responsive -->
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/buttons-min.css">
	<link rel="stylesheet" href="css/pure-skin-mine.css">	
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
	<!-- <link rel="stylesheet" href="css/modal.css"> -->
	<link rel="stylesheet" href="css/decoration.css">
	<link rel="stylesheet" href="css/responsive.css">
	<link rel="stylesheet" href="css/buttons.css">
	<link rel="stylesheet" href="js/DataTables/css/jquery.dataTables.css">
	
	<!-- ============================End of CSS links============================ -->

	<!-- ============================JS file goes here============================ -->
	<script src="jquery-ui-1.10.3.flick/js/jquery-1.9.1.js"></script>
	<script src="jquery-ui-1.10.3.flick/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- Bootstrap -->
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/jsResponsive.js"></script>
	<script src="js/jsButton.js"></script>
	<script src="js/AI1JavaScript.js"></script>
	<script src="js/autocomplete.js"></script>
	<script src="js/getURLParameter.js"></script>
	<script src="js/dataExchangeAjax.js"></script>

	<script src="js/DataTables/js/jquery.dataTables.js"></script>
	<script src="js/inboxAjax.js"></script>

	<!-- jGrowl -->
	<link rel="stylesheet" href="js/jGrowl/jquery.jgrowl.css">
	<script src="js/jGrowl/jquery.jgrowl.js"></script>


	<script>
		$(document).ready(function() {
			$('div#replyPanel').hide();
		});
		$(function() {
		    //datepicker
		    $( ".datepicker" ).datepicker({
		    	showOn: "both",
		    	buttonImage: "images/icon_calendar.png",
		    	buttonImageOnly: true,
		    	firstDay: 1,
		    	dateFormat: "d-M-yy",
		    	defaultDate: 0
		    });

		});

		/* slider bar */
		$(function() {
			$( "#distanceSlider" ).slider({
				value:0,
				min: 0,
				max: 1000,
				step: 10,
				slide: function( event, ui ) {
					$( "#distance" ).val( ui.value + " m");
				}
			});
			$( "#distance" ).val($( "#distanceSlider" ).slider( "value" )+" km");
		});
	</script>
</head>
<body>
	<header class="row-fluid">
		<div class="row-fluid">
			<div class="span3 offset9">
				<img id="govLogo" src="images/gov-logo.png" alt="Singapore Government verified"></img>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span12">
				<img id="banner" src="" alt="Integrated Case Management System" class="span8" href="#">
			</div>
		</div>
		<div class="row-fluid">
			<nav class="navbar">
				<div class="navbar-inner">
					<ul class="nav nav-pills">
						<li><a href="inbox(1).html">Inbox</a></li>
						<li><a href="#">Reports</a></li>
						<li><a href="create-case(1).html">New Case</a></li>
					</ul>
				</div>
			</nav>
		</div>
		<div class="row-fluid">
			<!--h1 class="span6" onclick="">ID:&nbsp;<span id="caseID"></span></h1-->
			<h1 class="span6" onclick="">Case Details</h1>
			<hr class="thickLine">
		</div>
	</header>
	<div class="container-fluid main">
		<div class="row-fluid">
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#caseID">ID</label>
					</div>
					<div class="span8">
						<span id="caseID"></span>
					</div>
				</div>
			</div>
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#caseStatus">Status</label>
					</div>
					<div class="span8">
						<span id="caseStatus"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#agencyCaseID">Agency Case ID</label>
				</div>
				<div class="span8">
					<span id="agencyCaseID">8523156165442164</span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>Incident Date</label>
				</div>
				<div class="span8"><span id="fbDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#recDate">Received Date</label>
				</div>
				<div class="span8"><span id="recDate"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#dueDate">Due Date</label>
				</div>
				<div class="span8"><span id="dueDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#closedDate">Closed Date</label>
				</div>
				<div class="span8"><span id="closedDate"></span></div>
			</div>
		</div>
		
		<div class="row-fluid">
			<div class="span2">
				<label for="#sbjTitle">Subject Title</label>
			</div>
			<div class="span10"><span id="sbjTitle"></span></div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#fbType">Feedback Type</label>
				</div>
				<div class="span8"><span id="fbType"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#channel">Channel</label>
				</div>
				<div class="span8"><span id="channel"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<!--div class="span6">
				<div class="span4">
					<label for="#caseDesc">Description</label>
				</div>
				<div class="span8">
					<p id="caseDesc" class="bigTextblock"></p>
				</div>
			</div-->
			<div class="span2">
				<label for="#caseDesc">Description</label>
			</div>
			<div class="span9" id="caseDescDiv">
				<p id="caseDesc" class="bigTextblock">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, velit, nisi, ullam esse omnis perspiciatis in consequuntur hic voluptas magnam eaque soluta facilis amet exercitationem nihil provident possimus. Tempore, doloribus vel omnis sunt itaque incidunt maiores minus cumque harum porro vitae sint molestiae quaerat qui commodi quas facilis aperiam officia!
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, magnam, facilis libero est laudantium nesciunt soluta aliquam impedit 
					et sapiente.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quia, atque sequi doloribus incidunt numquam provident dignissimos totam fuga assumenda expedita explicabo a obcaecati pariatur deserunt nesciunt perspiciatis omnis ea.
				</p>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#agency">Agency</label>
				</div>
				<div class="span8">
					<span id="agency"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#category">Category</label>
				</div>
				<div class="span8">
					<span id="category" class="autoCome"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#subCate">Sub Category</label>
				</div>
				<div class="span8">
					<span id="subCate" class="autoCome"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#uploadedImg">Uploaded Image</label>
				</div>
				<div class="span8"><img id="uploadedImg" src="" alt="Uploaded image"></div>
			</div>
			
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#address">Address</label>
					</div>
					<div class="span8">
						<p id="address"></p>
						<i class="fa fa-map-marker"></i> Map
					</div>	
				</div>
				<div class="row-fluid">
					<div class="span4">
						<label for="#postal">Postal Code</label>
					</div>
					<div class="span8"><span id="postal"></span></div>
					
				</div>
			</div>
		</div>
		
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateAgency">Last Update Agency</label>
				</div>
				<div class="span8"><span id="lastUpdateAgency"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#lastAction">Last Update Action</label>
				</div>
				<div class="span8"><span id="lastAction"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateDate">Last Update Date</label>
				</div>
				<div class="span8"><span id="lastUpdateDate"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="#closureDesc">Closure Description</label>
			</div>
			<div class="span10">
				<p id="closureDesc" class="bigTextblock"></p>
			</div>
		</div>
		<div class="rowfluid">
			<h2>Customer information</h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#custName">Customer Name</label>
				</div>
				<div class="span8">
					<span id="custName"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#phone">Phone</label>
				</div>
				<div class="span8">
					<span id="phone"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#NRIC">NRIC</label>
				</div>
				<div class="span8">
					<span id="NRIC"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#mCustID">Mobile Customer ID</label>
				</div>
				<div class="span8">
					<span id="mCustID"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#email">Email</label>
				</div>
				<div class="span8">
					<span id="email"></span>
				</div>
			</div>
		</div>
		<!-- load case info to page elements when those elements are loaded to page -->
		<script>loadCase2Page()</script>

		<!--Child case part-->
		<div id="childCasesPart">
			<div class="row-fluid">
				<h2>Child Cases</h2>
				<hr class="slimLine">
			</div>
			<div class="row-fluid">
				<div id="childCaseTableWrap">
					<table id="childCaseTable" class="childTable">
						<thead>
							<tr>
								<th>Child Case ID</th>
								<th>Subject Title</th>
								<th>Category</th>
								<th>Case Status</th>
								<th>Routing Date</th>
								<th>Due Date</th>
								<th>Agency</th>
							</tr>
						</thead>
						<tbody>
							<!--child cases are added in here-->
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- joint agencies part-->
		<div id="jointAgencyPart">
			<div class="row-fluid">
				<h2 class="subTitle">Agencies Involved</h2>
				<hr class="slimLine">
			</div>
			<div class="row-fluid">
				<div id="jointAgencyTableWrap">
					<table id="jointAgencyTable" class="agencyTable">
						<thead>
							<tr>
								<th id="name" style="width: 40%;">Agency Name</th>
								<th id="lead" style="width: 20%;">Lead Agency</th>
								<th id="status" style="width: 40%;">Status</th>
							</tr>
						</thead>
						<tbody>
							<!--child cases go here-->
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- "More Options" "Edit" "Accept" buttons -->
		<div class="row-fluid" style="min-height: 20px;"></div>
		<div class="row-fluid">
			<div class="span6 offset6">
				<div id="btnAcceptDiv">
					<button id="btnAccept" type="submit" class="pure-button pure-button-primary tailButton" onclick="btnChange2Edit()">Accept</button>
				</div>
				<div id="btnEditDiv">
					<button id="btnEdit" type="submit" class="pure-button pure-button-success tailButton" onclick="redirectEdit()">Edit&nbsp;&nbsp;<i class="fa fa-pencil-square-o"></i></button>
					<button id="btnReply" type="submit" class="pure-button pure-button-success tailButton" >Reply to Customer&nbsp;&nbsp;<i class="fa fa-mail-reply-all"></i></button>
				</div>
				<button id="btnMoreOptions" type="submit" class="pure-button pure-button-secondary tailButton">More Options&nbsp;&nbsp;<i class="fa fa-chevron-down"></i></button>
			</div>
		</div>

		<!-- ********** START: Reply to customer panels ********** -->
		<div class="row-fluid" id="replyPanel">
			<h2>Reply to Customer</h2>
			<hr class="slimLine">
			<div class="row-fluid">
				<div class="span2">
					<label for="#panelReply-caseReply">Enter Reply</label>
				</div>
				<div class="span10">
					<textarea class="bigTextarea" name="caseReply" id="panelReply-caseReply" placeholder="This is the reply seen by the customer"></textarea>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span2 offset2">
					<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="0">Interim Reply</input></label>
				</div>
				<div class="span2">
					<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="1">Final Reply</input></label>
				</div>
				<div class="span4 offset2">
					<div class="row-fluid">
						<div class="span6">
							<label for="#panelReply-ddlInformedCustomer" style="float:left;">Informed Customer?</label>
						</div>
						<div class="span6">
							<div class="row-fluid">
								<div class="span6">
									<label style="cursor:pointer;"><input type="radio" name="isInformed" id="panelReply-cbxInformedY" value="1">Yes</input></label>
								</div>
								<div class="span6">
									<label style="cursor:pointer;"><input type="radio" name="isInformed" id="panelReply-cbxInformedN" value="0">No</input></label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid" id="replyPanel-remarksDiv">
				<div class="row-fluid">
					<div class="span2"><label for="#panelReply-replyRemarks">Remarks (Internal)</label></div>
					<div class="span10">
						<textarea class="bigTextarea" name="replyRemarks" id="panelReply-replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
					</div>
				</div>
			</div>
			<div class="row-fluid" id="replyPanel-buttonsDiv">
				<button id="panelReply-btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton" onclick="submitReply()">Submit Reply</button>
			</div>
		</div>

		<!-- ********** START: Reply to customer panels ********** -->

		<!-- ********** START: More Option panels ********** -->

		<div class="row-fluid" id="optionsPanel">
			<h2>More Options</h2>
			<hr class="slimLine">
			<div class="tabbable row-fluid" id="panelHeader">
				<ul id="panelTabs" class="nav nav-tabs" data-tabs="tabs"> 
					<!--li class="active"><a href="#panelReply" data-toggle="tab">Reply to customer</a></li--> 
					<li class="active"><a href="#panelReroute" data-toggle="tab">Reroute</a></li> 
					<li><a href="#panelLink" data-toggle="tab">Link</a></li> 
					<li><a href="#panelMulti" data-toggle="tab">Joint</a></li> 
					<!--li><a href="#panelJoint" data-toggle="tab">Joint Resolution</a></li-->
					<li><a href="#panelReturn" data-toggle="tab">Rerurn to sender</a></li> 
				</ul> 
			</div>
			
			<div class="tab-content row-fluid" id="panelArea">
				<!-- reply tab -->
				<!--div class="tab-pane fade active in" id="panelReply">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelReply-caseReply">Enter Reply</label>
						</div>
						<div class="span10">
							<textarea class="bigTextarea" name="caseReply" id="panelReply-caseReply" placeholder="This is the reply seen by the customer"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2 offset2">
							<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="0">Interim Reply</input></label>
						</div>
						<div class="span2">
							<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="1">Final Reply</input></label>
						</div>
						<div class="span5 offset1">
							<label for="#panelReply-ddlInformedCustomer" style="float:left;">Informed Customer?</label>
							<select name="informedCustomer" id="panelReply-ddlInformedCustomer" style="float:right; width:50%;">
								<option value="yes">YES</option>
								<option value="No">NO</option>
							</select>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2"><label for="#panelReply-replyRemarks">Remarks (Internal)</label></div>
						<div class="span10">
							<textarea class="bigTextarea" name="replyRemarks" id="panelReply-replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
						</div>
					</div>
					<button id="panelReply-btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton" onclick="submitReply()">Submit</button>
				</div-->
				<!-- reroute tab -->
				<div class="tab-pane fade active in" id="panelReroute">
					<!-- START: autocomplete module -->
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp">Category Search</label>
							</div>
							<div class="span8">	
								<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
								<input type="text" class="autoComp tbx100" id="panelReroute-autoComp" placeholder="Enter keyword for categories...">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-category">Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-category" class="autoComp-category"></span>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-agency">Route to</label>
							</div>
							<div class="span8">
								<select id="panelReroute-autoComp-agency" class="autoComp-agency">
									<option value="AVA">AVA</option>
									<option value="HDB">HDB </option>
									<option value="LTA">LTA</option>
									<option value="NEA">NEA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="PUB">PUB</option>
									<option value="SPF">SPF</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-subCate">Sub Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-subCate" class="autoComp-subCate"></span>			
							</div>
						</div>
					</div>
					<!-- END: autocomplete module -->
					<div class="row-fluid">
						<div class="span2"><label for="#panelReroute-Remarks">Remarks</label></div>
						<div class="span10" style="margin">
							<textarea name="rerouteRemarks" id="panelReroute-Remarks" class="bigTextarea"></textarea>
						</div>
					</div>
					<dov class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
					</dov>
				</div>
				<!-- link cases tab -->
				<div class="tab-pane fade" id="panelLink">
					<div class="row-fluid">
						<div class="span2"><label for="#panelLink-Search">Search Cases</label></div>
						<div class="span10"><input type="text" id="panelLink-Search" placeholder="E.g. Subject Title, Description, Category" class="tbx100"></div>
					</div>
					<hr>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-CaseID">Case ID</label>
							</div>
							<div class="span8">
								<input type="text" id="panelLink-CaseID">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-FeedbackDate">Incident Date</label>
							</div>
							<div class="span8">
								<input type="text" class="datepicker" id="panelLink-FeedbackDate">
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-Agency">Agency</label>
							</div>
							<div class="span8">
								<select name="panelLink-Agency" id="linkAgency">
									<option value="NEA">NEA</option>
									<option value="AVA">AVA</option>
									<option value="LTA">LTA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="SPF">SPF</option>
									<option value="PUB">PUB</option>
									<option value="PSD">PSD</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#distance">Distance range:</label>
							</div>
							<div class="span7">
								<div class="row-fluid">
									<div class="span10">
										<div id="distanceSlider"></div>
									</div>
									<div class="span2">
										<input type="text" id="distance" style="width:50px;" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6 offset6">
							<div class="span8 offset4">
								<button type="submit" class="pure-button pure-button-primary tailButton">Search</button>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<h3></h3>
						<hr class="slimLine">
					</div>
					<div class="row-fluid inboxTable">
						<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="linkCaseTable" width="100%" aria-describedby="" style="width: 100%;">
							<colgroup>
							<col span="1" style="width: 2%;">
							<col span="1" style="width: 10%;">
							<col span="1" style="width: 19%;">
							<col span="1" style="width: 10%;">
							<col span="1" style="width: 15%;">
							<col span="1" style="width: 17%;">
							<col span="1" style="width: 17%;">
							<col span="1" style="width: 10%;">
							</colgroup>
							<thead>
								<tr>
									<th><input type="checkbox" id="cbxAll"></input></th>
									<th>Case ID</th>
									<th>Subject Title</th>
									<th>Category</th>
									<th>Case Status</th>
									<th>Incident Date</th>
									<th>Due Date</th>
									<th>Agency</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="checkbox"></input></td>
									<td>201365218456</td>
									<td>Pile of rubbish left at HDB block</td>
									<td>Illegal Dumping</td>
									<td>Pending HDB</td>
									<td>25-Aug-2013</td>
									<td>23-Aug-2013</td>
									<td>HDB</td>
								</tr>
							</tbody>
						</table>
					</div>
					<hr>
					<div class="row-fluid">
						<div class="span6 offset6">
							<div class="row-fluid">
								<div class="span4 offset2">
									<label style="cursor:pointer;"><input type="radio" name="linkType" value="1">Duplicated case</input></label>
								</div>
								<div class="span4">
									<label style="cursor:pointer;"><input type="radio" name="linkType" value="0">Related case</input></label>
								</div>
								<div class="span2">
									<button type="submit" class="pure-button pure-button-primary tailButton" id="btnLinkCase">Link</button>
								</div>
							</div>
						</div>
					</div>				
				</div>
				<!-- multi issue tab -->
				<div class="tab-pane fade" id="panelMulti">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelMulti-SubjectTitle">Subject Title</label>
						</div>
						<div class="span10">
							<input type="text" id="panelMulti-SubjectTitle" class="tbx100">
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelMulti-Issue">Issue Description</label>
						</div>
							<div class="span10">
							<textarea name="issueDescription" id="panelMulti-Issue" class="bigTextarea"></textarea>
						</div>
					</div>
				

					<!-- START: autocomplete module -->
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp">Category Search</label>
							</div>
							<div class="span8">	
								<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
								<input type="text" class="autoComp tbx100" id="panelReroute-autoComp" placeholder="Enter keyword for categories...">
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-category">Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-category" class="autoComp-category"></span>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-subCate">Sub Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-subCate" class="autoComp-subCate"></span>			
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-agency">Target Agency</label>
							</div>
							<div class="span8">
								<select id="panelReroute-autoComp-agency" class="autoComp-agency">
									<option value="AVA">AVA</option>
									<option value="HDB">HDB </option>
									<option value="LTA">LTA</option>
									<option value="NEA">NEA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="PUB">PUB</option>
									<option value="SPF">SPF</option>
								</select>
								<label style="cursor:pointer;"><input type="checkbox">Lead Agency</label>
							</div>
						</div>
					</div>
					<!-- END: autocomplete module -->
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelMulti-Address">Address</label>
							</div>
							<div class="span8">
								<textarea name="address" id="panelMulti-Address" class="tbxAddress"></textarea>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelMulti-Postal">Postal Code</label>
							</div>
							<div class="span8">
								<input type="text" id="panelMulti-Postal" placeholder="6 digits postal code">
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">+ Add Child Case</button>
					</div>
				</div>

				<!-- joint resolution panel -->
				<!--div class="tab-pane fade" id="panelJoint">
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-category">Category</label>
							</div>
							<div class="span8">
								<select name="Category" id="panelJoint-category">
									<option value="Animal">Animal</option>
									<option value="Air polution">Air polution</option>
									<option value="BCA">BCA</option>
									<option value="Bicycle">Bicycle</option>
									<option value="danger">danger</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-sub-category">Sub Category</label>
							</div>
							<div class="span8">
								<select name="Category" id="panelJoint-sub-category">
									<option value="Animal">Animal</option>
									<option value="Air polution">Air polution</option>
									<option value="BCA">BCA</option>
									<option value="Bicycle">Bicycle</option>
									<option value="danger">danger</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelJoint-remarks">Remarks</label>
						</div>
						<div class="span10">
							<textarea name="remarks" id="panelJoint-remarks" class="bigTextarea"></textarea>
						</div>
					</div>
					<hr class="slimLine">
					<div class="row-fluid">
						<div class="span6">
							<div class="row-fluid">
								<div class="span4">
									<label for="#panelJoint-TargetAgency">Target Agency</label>
								</div>
								<div class="span8">
									<select name="tergetAgency" id="panelJoint-TargetAgency">
										<option value="NEA">NEA</option>
										<option value="AVA">AVA</option>
										<option value="LTA">LTA</option>
										<option value="NPARKS">NPARKS</option>
										<option value="SPF">SPF</option>
										<option value="PUB">PUB</option>
										<option value="PSD">PSD</option>
									</select>
								</div>
							</div>
							<div class="row-fluid">
								<div class="span8 offset4">
									<label style="cursor:pointer;"><input type="checkbox">Lead Agency</label>
								</div>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-Agency-remarks">Remarks</label>
							</div>
							<div class="span8">
								<textarea name="agencyRemarks" id="panelJoint-Agency-remarks" class="tbxAddress"></textarea>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">+ Add Agency</button>
					</div>
				</div-->


				<!-- return to sender panel -->
				<div class="tab-pane fade" id="panelReturn">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelReroute-Reason">Returning Reason</label>
						</div>
						<div class="span10">
							<textarea name="returningReason" id="panelReroute-Reason" class="bigTextarea"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
					</div>
				</div>
			</div><!-- end of inner tabs tag -->
		</div><!-- end of tabs nav tag -->
		
		<!-- *********** END: More Option panels ***********  -->

		

	</div>

	<footer class="row-fluid">
		<span id="copyright">&copy; Copyright 2013, All rights Reserved.</span>
		<span id="PSTCD">Privacy Statement | Terms &amp; Conditions | Disclaimer</span>
	</footer>

</body>
</html>
